<template>
	<view class="join" :style="{minHeight: pageHeight + 'px'}">
		<view class="model" style="margin-top: 15px;">
			<view class="model-p">基本信息</view>
			
			<view style="width: 100%;display: flex;align-items: center;margin-bottom: 15px;">
				<text style="flex: 0 0 90px;margin-right: 15px;font-size: 14px;">
					<text style="color: #FF0000;display: inline-block;width: 10px;">*</text>姓名</text>
				<view style="width: 100%;">
					 <u--input
					    placeholder="请输入姓名"
					    border="bottom"
					    clearable
					  ></u--input>
				</view>
			</view>
			<view style="width: 100%;display: flex;align-items: center;margin-bottom: 15px;">
				<text style="flex: 0 0 90px;margin-right: 15px;font-size: 14px;">
					<text style="color: #FF0000;display: inline-block;width: 10px;">*</text>身份证号码</text>
				<view style="width: 100%;">
					 <u--input
					    placeholder="请输入身份证号码"
					    border="bottom"
					    clearable
					  ></u--input>
				</view>
			</view>
			<view style="width: 100%;display: flex;align-items: center;margin-bottom: 15px;">
				<text style="flex: 0 0 90px;margin-right: 15px;font-size: 14px;">
					<text style="color: #FF0000;display: inline-block;width: 10px;">*</text>联系电话</text>
				<view style="width: 100%;">
					 <u--input
					    placeholder="请输入联系电话"
					    border="bottom"
					    clearable
					  ></u--input>
				</view>
			</view>
			<view style="width: 100%;display: flex;align-items: center;">
				<text style="flex: 0 0 100px;margin-right: 15px;font-size: 14px;">
					<text style="display: inline-block;width: 10px;"> </text>
					基本介绍</text>
				<view style="width: 100%;">
					 <u--input
					    placeholder="请输入基本介绍"
					    border="none"
					    clearable
					  ></u--input>
				</view>
			</view>
		</view>
	
		<view class="model" style="margin-top: 15px;">
			<view class="model-p">证明材料</view>
			
			<view style="width: 100%;display: flex;margin-bottom: 15px;flex-direction: column;">
				<text style="flex: 0 0 auto;font-size: 14px;margin-top: 15px;margin-bottom: 10px;"> <text style="color: #FF0000;display: inline-block;width: 10px;">*</text>身份证正面</text>
				<view style="width: 100%;">
					<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						width="120"
						height="120"
						:maxCount="10"
					>
					<image src="../../../static/images/icon-file-upload.svg" style="width: 60px;height: 60px;"></image>
					</u-upload>
				</view>
			</view>
			
			<view style="width: 100%;display: flex;margin-bottom: 15px;flex-direction: column;">
				<text style="flex: 0 0 auto;font-size: 14px;margin-top: 15px;margin-bottom: 10px;">
					<text style="color: #FF0000;display: inline-block;width: 10px;">*</text>身份证反面</text>
				<view style="width: 100%;">
					<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						width="120"
						height="120"
						:maxCount="10"
					>
					<image src="../../../static/images/icon-file-upload.svg" style="width: 60px;height: 60px;"></image>
					</u-upload>
				</view>
			</view>
			
			<view style="width: 100%;display: flex;margin-bottom: 15px;flex-direction: column;">
				<text style="flex: 0 0 auto;font-size: 14px;margin-top: 15px;margin-bottom: 10px;">
					<text style="color: #FF0000;display: inline-block;width: 10px;">*</text>营业执照</text>
				<view style="width: 100%;">
					<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						width="120"
						height="120"
						:maxCount="10"
					>
					<image src="../../../static/images/icon-file-upload.svg" style="width: 60px;height: 60px;"></image>
					</u-upload>
				</view>
			</view>
		</view>
		
		<view class="btn-submit">提交申请</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageHeight: 0,
				fileList: [],
				
			}
		},
		methods: {
			afterRead() {},
			deletePic() {}
		},
		created() {
			this.$nextTick(() => {
				uni.getSystemInfo({
				  success: (res) => {  
					this.pageHeight = res.windowHeight
				  }  
				});
				
		
			})
		},
	}
</script>

<style scoped lang="scss">
	.join {
		background: #F7F8F9;
		padding-top: 15px;
		padding-bottom: 15px;
		
		.model {
			width: 345px;
			min-height: 240px;
			background: #FFFFFF;
			border-radius: 10px;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 15px;
			
			.model-p {
				color: #EF312A;
				font-size: 16px;
				position: relative;
				
				&::before {
					content: '';
					width: 5px;
					height: 15px;
					background: #EF312A;
					border-radius: 0px 3px 3px 0px;
					position: absolute;
					top: 3px;
					left: -15px;
					
				}
			}
			
		}
	}
	
	.btn-submit {
		width: 345px;
		height: 40px;
		background: #EF312A;
		border-radius: 10px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		margin: 15px auto;
		font-size: 14px;
	}

</style>